<!--表单-->
<div class="tpl-portlet-components">
	<div class="tpl-block">
		<table id="blg-list" class="am-table am-table-hover">
			<thead>
				<tr>
					<td>编号</td>
					<td>标题</td>
					<td>类型</td>
					<td>浏览次数</td>
					<td>点赞量</td>
					<td>发布时间</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody id="news"></tbody>
		</table>
	</div>
</div>
<!--编辑模态框 -->
<div class="am-popup" id="article-edit" style="z-index: 8800;width: 80%;height:80%; left: 30%;">
	<div class="am-popup-inner">
		<div class="am-popup-hd" style="background-color: #0075B0;">
			<h4 class="am-popup-title" style="color: #F0F0F0;">修改博客</h4>
			<span data-am-modal-close class="am-close">&times;</span>
		</div>
		<div class="am-popup-bd">
			<div class="tpl-portlet-components">
				<div class="tpl-block">
					<div class="am-g">
						<div class="tpl-form-body tpl-form-line">
							<form class="am-form tpl-form-line-form" id="aform">
								<div class="am-form-group">
									<input type="hidden" name="id" id="artid" />
									<label for="user-name" class="am-u-sm-2 am-form-label">标题 </label>
									<div class="am-u-sm-10">
										<input name="title" type="text" class="tpl-form-input" id="title" placeholder="请输入标题文字">
										<!--<small>请填写标题文字10-20字左右。</small>-->
									</div>
								</div>
								<div class="am-form-group">
									<label for="user-weibo" class="am-u-sm-2 am-form-label">封面图</label>
									<div class="am-u-sm-10">
										<div class="am-form-group am-form-file">
											<div class="tpl-form-file-img">
												<img id="imgpreview" src="assets/img/a5.png" width="110" height="110" alt="">
												<input type="hidden" name="img" id="img" />
											</div>
											<button type="button" class="am-btn am-btn-danger am-btn-sm">
    								<i class="am-icon-cloud-upload"></i> 添加封面图片</button>
											<input id="doc-form-file" type="file" multiple>
										</div>

									</div>
								</div>

								<div class="am-form-group">
									<label for="user-weibo" class="am-u-sm-2 am-form-label">类型 </label>
									<div class="am-u-sm-10">
										<select id="types" name="typeid" class="selector"></select>
										<div>
										</div>
									</div>
								</div>
								   
								<div class="am-form-group">
						            <label for="user-abstrct" class="am-u-sm-2 am-form-label">摘要</label>
						            <div class="am-u-sm-10">
							            <input name="abstrct" type="text" class="tpl-form-input" id="abstrct" placeholder="请输入摘要">
						            </div>
					            </div>

								<div class="am-form-group">
									<label for="user-intro" class="am-u-sm-2 am-form-label">隐藏文章</label>
									<div class="am-u-sm-10">
										<div class="tpl-switch">
											<input type="checkbox" class="ios-switch bigswitch tpl-switch-btn" checked />
											<div class="tpl-switch-btn-view">
												<div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="am-form-group">
									<label for="user-intro" class="am-u-sm-2 am-form-label">文章内容</label>

									<div class="am-u-sm-10">
										<div id="div1"></div>
										<textarea name="content" rows="10" id="blog-content" placeholder="请输入文章内容" style="display: none;"></textarea>
									</div>
								</div>

								<div class="am-form-group">
									<div class="am-u-sm-9 am-u-sm-push-3">
										<button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success " id="submit-edit">提交</button>
									</div>
								</div>
							</form>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	//富文本编辑器
	var E = window.wangEditor
	var editor = new E('#div1')
	var $text1 = $('#blog-content')
	/*editor.customConfig.onchange = function(html) {
		// 监控变化，同步更新到 textarea
		$text1.val(html)
	}*/
	editor.create()
	
	//请求文章类型
	$.get("allTypes", function(data) {
		//console.log(data)
		//$("#types").empty();
		$.each(data, function(i, tn) {
			$("#types").append("<option value='" + tn.id + "'>" + tn.name + "</option>")
		});
	});
	
	//上传图片,把用户选择的图片转化为Base64编码并赋值给img元素和input[type=hidden]
	$("#doc-form-file").change(function() {
		var file = this.files[0];
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function() {
			$("#imgpreview").attr("src", this.result);
			$("#img").val(this.result)
		}
	});
	
	//更新提交
	$("#submit-edit").click(function() {
		$("#blog-content").val(editor.txt.html());
		$.post("update", $("#aform").serialize(), function(data) {
			table.ajax.reload();//重新加载
			$("#article-edit").modal("close");
			alert(data);
		})
	})
	var table = $("#blg-list")
		.on("draw.dt", function() {
			//删除
			$(".del").unbind(); //移除事件
			$(".del").click(function() {
				if (confirm("是否确定删除记录？")) {
					var id = $(this).attr("id");
					$.post("del", {
						"id": id
					}, function(data) {
						table.ajax.reload();
						alert(data);
					})
				}
			});
			//编辑
			$(".edit").unbind();
			$(".edit").click(function() {
				var id = $(this).attr("id");
				$.post("info", {
					"id": id
				}, function(data) {
					console.log(data)
					var curid=data.atype.id;
					$("#types").children("option").each(function (i,option) {
						if($(option).val()==curid){
							$(option).attr("selected","selected")
						}
					});
					//$("#types option[value='" + data.atype.id + "']").attr("selected", true);
					$("#artid").val(data.id);
					$("#title").val(data.title);
					$("#imgpreview").attr("src", data.img);
					$("#img").val(data.img);
					$("#abstrct").val(data.abstrct)
					editor.txt.html(data.content);
					$("#blog-content").val(data.content);
					$("#article-edit").modal();
				})
			});
		})
		.DataTable({
			"ajax": {
				"url": "allarticles",
				"dataSrc": ""
			},
			"columns": [{
				data: 'null'
			}, {
				data: 'title'
			}, {
				data: 'type'
			}, {
				data: 'browsers'
			}, {
				data: 'likes'
			}, {
				data: 'createTime'
			}, {
				data: 'null'
			}],
			"columnDefs": [{
				"targets": 0,
				"render": function(data, type, row, meta) {
					//console.log(data,type,row,meta)
					return meta.row + 1;
				}
			}, {
				"targets": 6,
				"orderable": false,
				"render": function(data, type, row, meta) {
					return "<button type='button' class='edit am-btn-xs am-btn-primary' id='" + row.id + "' data-toggle='modal'>编辑</button><button id='" + row.id + "' type='button' class='del am-btn-xs am-btn-primary'>删除</button>";
				}
			}]
		});
</script>